<template>
  <div class="checkProduct">
    <div class="title">
      审核房源
    </div>
    <!-- 列表 -->
    <el-table :data="initData.list" style="width: 100%" max-height="450">
      <el-table-column align="center" header-align='center' type="index" label="序号" width="50"></el-table-column>
      <el-table-column align="center" header-align="center" prop="title" label="标题">
        <template slot-scope="scope">
          <p class="one-txt-cut">{{scope.row.title}}</p>
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" prop="houseNum" label="栋阁房号">
      </el-table-column>
      <el-table-column align="center" header-align="center" prop="kind" label="户型">
      </el-table-column>
      <el-table-column align="center" header-align="center" prop="sup" label="期望价格" sortable>
        <template slot-scope="scope">
          {{scope.row.sup}}万
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" prop="userPhone" label="委托人手机号" width="110">
      </el-table-column>
      <el-table-column align="center" header-align="center" prop="state" label="状态">
        <template slot-scope="scope">
          {{((key)=>{
            switch(key){
              case 0: return '等待审核';break;
              case -2: return '审核不通过';break;
            }
          })(scope.row.state)}}
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" prop="createdAt" label="申请日期" width="160" sortable>
        <template slot-scope="scope">
          {{$util.formDate(scope.row.createdAt)}}
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="操作" width="250">
        <template slot-scope="scope">
          <el-button type="warning" size="mini" @click="goPage(scope.row.id)">编辑</el-button>
          <!-- <el-button type="primary" size="mini" @click="changeState(scope.row, 1)">通过</el-button> -->
          <!-- <el-button type="danger" size="mini" @click="changeState(scope.row, 4)">不通过</el-button> -->

          <el-popconfirm title="确定通过此委托吗？" @confirm="changeState(scope.row, 1)" style="margin-left:10px">
            <el-button size="mini" type="primary" slot="reference">通过</el-button>
          </el-popconfirm>

          <el-popconfirm title="确定驳回此委托吗？" @confirm="changeState(scope.row, 4)" style="margin-left:10px">
            <el-button size="mini" type="danger" slot="reference">不通过</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <div class="pagination-box">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page" :page-sizes="[5, 10, 15, 20]" :page-size="params.size" layout="total, sizes, prev, pager, next, jumper" :total="params.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'B_CheckHouse',
  data() {
    return {
      initData: {
        list: [
          // {
          //   id: 1,
          //   title: "金碧花园有房出售",
          //   houseNumber: '2栋301房',
          //   imgList: [
          //     { src: require("@/assets/images/detail1.jpg") },
          //     { src: require("@/assets/images/detail2.jpg") },
          //     { src: require("@/assets/images/detail3.jpg") },
          //     { src: require("@/assets/images/detail4.jpg") },
          //     { src: require("@/assets/images/detail1.jpg") },
          //     { src: require("@/assets/images/detail2.jpg") },
          //     { src: require("@/assets/images/detail3.jpg") },
          //     { src: require("@/assets/images/detail4.jpg") },
          //   ],
          //   price: 2000,
          //   unit_price: 71700,
          //   kind: "6室3厅3卫",
          //   floor1: "低楼层",
          //   floors: 3,
          //   buildArea: 278.94,
          //   orientation: "南",
          //   buildYear: "2007-02-02",
          //   decoration: "豪装",
          //   insideArea: 270,
          //   estate: "金碧花园第三金碧",
          //   location: "海珠-工业大道南",
          //   branch: "17web3",
          //   purpose: "普通住宅",
          //   nature: "商品房",
          //   propertyYear: 70,
          //   isDt: true,
          //   sellingTime: "2021-03-02",//挂牌
          //   tag1: "精选好房",
          //   tag2: "红本在手",
          //   tag3: "满五年",
          //   tag4: "有电梯",
          //   highlights:
          //     "小区环境优美，封闭式管理，进小区进楼房都需要刷卡，小区安全有秩序。小区绿化很好，有公共娱乐和锻炼的地方。区的绿化率很高，环境非常舒适，空气清新。小区周边的服务设施和配套设施都非常的齐全，小区管理完善，适宜居住。",
          //   dec_desc: "居家装修，房子保养的不错，适于一家人居住。",
          //   kind_desc: "户型比较方正，采光通风比较好，居住比较舒适。",
          //   traffic: "地铁 距广佛线石溪站330米；距2号线东晓南站889米",
          //   state: 0,// 0-审核中 1-审核通过 -2-审核不通过
          //   create_At: '2021-01-01',
          // },
          // {
          //   id: 1,
          //   title: "金碧花园有房出售2",
          //   houseNumber: '2栋301房',
          //   imgList: [
          //     { src: require("@/assets/images/detail1.jpg") },
          //     { src: require("@/assets/images/detail2.jpg") },
          //     { src: require("@/assets/images/detail3.jpg") },
          //     { src: require("@/assets/images/detail4.jpg") },
          //     { src: require("@/assets/images/detail1.jpg") },
          //     { src: require("@/assets/images/detail2.jpg") },
          //     { src: require("@/assets/images/detail3.jpg") },
          //     { src: require("@/assets/images/detail4.jpg") },
          //   ],
          //   price: 2000,
          //   unit_price: 71700,
          //   kind: "6室3厅3卫",
          //   floor1: "低楼层",
          //   floors: 3,
          //   buildArea: 278.94,
          //   orientation: "南",
          //   buildYear: "2007-02-02",
          //   decoration: "豪装",
          //   insideArea: 270,
          //   estate: "金碧花园第三金碧",
          //   location: "海珠-工业大道南",
          //   branch: "17web3",
          //   purpose: "普通住宅",
          //   nature: "商品房",
          //   propertyYear: 70,
          //   isDt: true,
          //   sellingTime: "2021-03-02",//挂牌
          //   tag1: "精选好房",
          //   tag2: "红本在手",
          //   tag3: "满五年",
          //   tag4: "有电梯",
          //   highlights:
          //     "小区环境优美，封闭式管理，进小区进楼房都需要刷卡，小区安全有秩序。小区绿化很好，有公共娱乐和锻炼的地方。区的绿化率很高，环境非常舒适，空气清新。小区周边的服务设施和配套设施都非常的齐全，小区管理完善，适宜居住。",
          //   dec_desc: "居家装修，房子保养的不错，适于一家人居住。",
          //   kind_desc: "户型比较方正，采光通风比较好，居住比较舒适。",
          //   traffic: "地铁 距广佛线石溪站330米；距2号线东晓南站889米",
          //   state: -2,
          //   create_At: '2021-01-01',
          // },

        ],
      },
      params: {
        page: 1,
        total: 0,
        size: 10,// 一页10条
      },

    }
  },
  created() {
    let oj = {
      title: '房源列表',
      nav: '1-3',
    };
    this.$emit('isTitle', oj);
    this.init();
  },
  methods: {
    init() {
      this.axios({
        method: 'get',
        url: this.baseUrl + '/getHouseList',
        params: {
          page: this.params.page,
          size: this.params.size,
          state: 0
        }
      }).then(res => {
        console.log('res==>', res)
        if (res.data.code == 200) {
          this.initData.list = res.data.data;
          this.params.total = res.data.total;
        }
      }).catch(err => {
        console.log('err==>', err)
        this.$message.error(res.data.msg)
      })
    },
    // 跳转
    goPage(i) {
      this.$router.push(`/backstage/PostHouse?id=${i}`);
    },
    // 改变状态
    changeState(o, t) {
      let msg = '';
      if (t == 4) {
        msg = '不通过'
      } else if (t == 1) {
        msg = '通过'
      }
      this.axios({
        method: 'put',
        url: this.baseUrl + '/editHouse',
        params: {
          id: o.id,
          state: t,
        }
      }).then(res => {
        console.log('res==>', res)
        if (res.data.code == 200) {
          this.$message.success(`审核成功，委托${msg}`)
          this.init();
        } else {
          this.$message.error(`审核失败`)
        }
      }).catch(err => {
        console.log('err==>', err)
        this.$message.error(res.data.msg)
      })
    },
    // 当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.page = val;
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.size = val;
    },
  },
}
</script>

<style lang="less" scoped>
.checkProduct {
  background-color: #fff;
  .title {
    font-size: 20px;
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;
    font-weight: bold;
  }
  .el-pagination {
    margin-top: 30px;
    text-align: center;
  }
}
</style>